<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义进度条</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body style="font-family: Arial">
         <select id="percent4pb">
             <option value="10">10</option>
             <option value="20">20</option>
             <option value="30">30</option>
             <option value="40">40</option>
             <option value="50">50</option>
             <option value="60">60</option>
             <option value="70">70</option>
             <option value="80">80</option>
             <option value="90">90</option>
         </select>
         <br/>
         <!--使用按钮启动自动进度动画-->
         <input type="button" id="myButton" value="启动进度动画"/>
         <br/>
         <br/>
         <!-自定义进度条的容器-->
         <div id="outter" style="background: #eeeeee;height: 20px;width: 500px;padding: 5px">
             <div id="inner" style="background-color: red;height: 19px;width: 0px;color: white;
                      text-align: center ;"></div>
         </div>
         <script type="text/javascript">
             $(document).ready(function () {
                 bindClick4Button();
             })
         </script>
</body>
</html>